/*
 * @Author: hanyu 
 * @Date: 2018-05-09 16:38:35 
 * @Last Modified by: hy
 * @Last Modified time: 2018-06-26 14:37:48
 */
<template>
  <bg-lay-out>
    <div slot="headerText">房联行数据中心</div>
    <sel-time class="selTimeCon" slot="headerMain" :cityId="selTimeCityId" val="1" @onChangeTime="onChangeTime"></sel-time>
    <div slot="main">
      <el-row type="flex">
        <div class="topLeftCon">
          <div class="topLeftFont">
            <p style="text-align: center;">总营业额</p>
            <b class="boldFont">
              <i-count-up :startVal="startVal" :endVal="workNum" :decimals="decimals" :duration="duration" :options="options" />
            </b>
          </div>
          <div class="topBottomRow">
            <div class="topBottomItem">
              <p>门店数量</p>
              <p class="topBottomNum">
                {{storeNum}}</p>
            </div>
            <div class="topBottomItem">
              <p>累计房源量</p>
              <p class="topBottomNum">{{houseNum}}</p>
            </div>
            <div class="topBottomItem">
              <p>累计成交量</p>
              <p class="topBottomNum">{{volume}}</p>
            </div>
          </div>
        </div>
        <div class="topRightCon">
          <el-col class="topRightLCon">
            <chart-lay-out>
              <span slot="title">区域房源成交量</span>
              <bar-chart slot="main" v-model="roomAreaArr" :option="roomAreaOption"></bar-chart>
            </chart-lay-out>
          </el-col>
          <el-col class="topRightLCon">
            <chart-lay-out :showLine="false">
              <span slot="title">区域门店成交top10</span>
              <bar-chart slot="main" v-model="storeTransactionTopArr"></bar-chart>
            </chart-lay-out>
          </el-col>
        </div>
      </el-row>
      <el-row class="marginBot-30" type="flex">
        <div class="midCon">
          <el-row>
            <el-col :xs="8" :sm="8" :md="8" :lg="8" :xl="8" class="minTopLeftCon">
              <chart-lay-out>
                <span slot="title">区域门店分布</span>
                <pie-chart slot="main" v-model="areaStoreArr" :option="areaStoreOption"></pie-chart>
              </chart-lay-out>
            </el-col>
            <el-col :xs="8" :sm="8" :md="8" :lg="8" :xl="8" class="minTopLeftCon">
              <chart-lay-out>
                <span slot="title">区域客源分布</span>
                <pie-chart slot="main" v-model="customerAreaArr" :option="areaStoreOption"></pie-chart>
              </chart-lay-out>
            </el-col>
            <el-col :xs="8" :sm="8" :md="8" :lg="8" :xl="8" class="minTopLeftCon">
              <chart-lay-out :showLine="false">
                <span slot="title">区域收入统计</span>
                <pie-chart slot="main" v-model="areaIncomeArr" :option="areaStoreOption"></pie-chart>
              </chart-lay-out>
            </el-col>
          </el-row>
          <div class="lineCon">
            <div class="lineImg"></div>
          </div>
          <el-row>
            <el-col :xs="8" :sm="8" :md="8" :lg="8" :xl="8" class="minTopLeftCon">
              <chart-lay-out>
                <span slot="title">区域成交户型分布</span>
                <bar-charts slot="main" v-model="regionalAreaTypeArr" :option="areaIncregionalAreaTypeOption"></bar-charts>
              </chart-lay-out>
            </el-col>
            <el-col :xs="8" :sm="8" :md="8" :lg="8" :xl="8" class="minTopLeftCon">
              <div class="topRightLLine">
                <div class="topRightLTopTitleLine">
                </div>
                <span class="topRightLTopTitle">区域新房楼盘分布</span>
              </div>
              <chart :chartStyle="'min-height:200px;height:300px'" :option="developmentAreaOption"></chart>
              <div class="chartLine"></div>
            </el-col>
            <el-col :xs="8" :sm="8" :md="8" :lg="8" :xl="8" class="minTopLeftCon">
              <city-baidu-map :hoverObj="hoverObj" @on-map="onMap"></city-baidu-map>
              <!-- <b-map-luoyang-h :hoverObj="hoverObj" @on-map="onMap"></b-map-luoyang-h> -->
            </el-col>
          </el-row>
        </div>
      </el-row>
    </div>
  </bg-lay-out>
</template>
<script>
var startTime = "";
var endTime = "";
import chartLayOut from "@/components/Charts/chartLayOut";
import chart from "../../../../components/Charts/newChart";
import conditionChart from "@/components/flh/conditionChart.vue";
import cityBaiduMap from "@/components/flh/cityBaiduMap.vue";
import {
  GetDataProfileInfo, // 数据基础情况
  GetDataByDoubleTargetForTwo, // 双向指标统计
  GetDataByTargetForTwo, // 单项指标统计
  GetBusinessRanking // 排名前十
} from "@/api/flh/home";
import SelTime from "@/components/flh/selTime";
import { GetAllRegion } from "@/api/flh/home";
import ICountUp from "vue-countup-v2";
import bgLayOut from "@/components/bgLayOut/index";
import pieChart from "@/components/Charts/pieChart";
import barChart from "@/components/Charts/barChart";
import barCharts from "@/components/Charts/barCharts";
import lineChart from "@/components/Charts/lineChart";
const lineCircle =
  "";
const lineCircle2 =
  "";

export default {
  name: "propertiesAnalysis",
  components: {
    chart,
    conditionChart,
    SelTime,
    ICountUp,
    bgLayOut,
    pieChart,
    barChart,
    barCharts,
    lineChart,
    chartLayOut,
    cityBaiduMap
  },
  data() {
    return {
      selTimeCityId: this.$route.query.cityId,
      cityId: 0,
      areaIncregionalAreaTypeOption: {
        tooltip: {
          position: function(pos, params, dom, rect, size) {
            // 鼠标在左侧时 tooltip 显示到右侧，鼠标在右侧时 tooltip 显示到左侧。
            var obj = { top: -10 };
            // obj[["left", "right"][+(pos[0] < size.viewSize[0] / 2)]] = 5;
            return obj;
          }
        },
        barWidth: 10,
        grid: {
          top: "10%",
          left: "13%",
          width: "90%",
          height: "40%"
        }
      },
      areaIncomeOption: {
        hideLineColor: true,
        itemStyle: { barBorderRadius: [30, 30, 0, 0] },
        color: ["#0c43fd", "#8d4cfd"],
        barWidth: 21,
        grid: {
          bottom: "30%",
          borderRadius: 200,
          itemWidth: 200,
          padding: [5, 10]
        },
        legend: {
          itemGap: 25,
          right: "20"
        }
      },
      areaStoreOption: {
        legend: {
          itemGap: 10
        }
      },
      roomAreaOption: {},
      workNum: 0,
      startVal: 0,
      decimals: 0,
      duration: 2.5,
      options: {
        useEasing: true,
        useGrouping: true,
        separator: ",",
        decimal: ".",
        prefix: "",
        suffix: ""
      },
      offsetL: 18, // 子组件相对父组件偏移量
      itemW: 44, // 子组件宽度
      topNav: [],
      nowId: "",
      areaId: "",
      hoverObj: [],
      sumIncome: "", // 合计收入
      sumIncomeArr: [],
      volume: "", // 成交量
      buildNum: "", // 楼盘
      customerNum: "", // 客源量
      houseNum: "", // 房源量
      storeNum: "", // 门店数量
      newHouseParams: {
        startTime: "",
        endTime: "",
        queryType: ""
      },
      gTime: [],
      screenObj: {}, // 全局数据
      developmentAreaOption: [], // 区域新房楼盘分布
      regionalAreaTypeArr: [], // 区域成交房源类型
      customerAreaArr: [], // 区域客源分布
      storeTransactionTopArr: [], // 区域门店成交top
      areaStoreArr: [], // 区域门店分布
      areaIncomeArr: [], //  区域收入统计
      roomAreaArr: [],
      houseAmountInfo: {
        sumHouse: "", // 房源总数
        rentHouse: "", // 出租房源
        sellHouse: "", // 出售房源
        rentalHouse: "" // 租售房源
      },
      startTime: "",
      endTime: "",
      params: {
        // 查询房源指标数据
        startTime: startTime,
        endTime: endTime,
        queryType: "" // 18001门店 18002员工 18003房源 18004客源 18005成交量 18006成交总收入18007共享营销
      },
      houseAmountParams: {
        startTime: startTime,
        endTime: endTime,
        queryType: "18003" // queryType:查询指标 18008区域房源分布（房源分析） 18010房屋户型占比（房源分析） 18011房源类型占比分析（房源分析） 18013区域客源量分（客源分析） 18016共享营销客源线索（客源分析） 18018成交户型统计 （交易分析） 18019区域类型成交（交易分析） 18021 区域成交户型（交易分析）
      },
      areaArr: [] // 区域
    };
  },
  mounted() {
    this.fetchArea();
  },
  methods: {
    onNav(itemId, id) {
      this.nowId = id;
      this.areaId = itemId;
      var itemW = this.$refs["item" + id][0].offsetWidth - 10;
      var itemL = this.$refs["item" + id][0].offsetLeft + 5; // 当前元素距离父节点的左边 水平距离 ,距离父节点的偏移量
      this.$set(this, "offsetL", itemL);
      this.$set(this, "itemW", itemW);
      this.fetchData();
    },
    // 退出
    getOut() {
      this.$refs.myModel.showModel();
    },
    async fetchAllStore() {
      var params = {
        cityId: this.cityId,
        startTime: this.screenObj.gTime[0],
        endTime: this.screenObj.gTime[1],
        queryType: "18022"
      };
      try {
        var res = await GetDataByTargetForTwo(params);
        if (res.data.code === "0") {
          this.$set(this, "hoverObj", res.data.result.list);
          this.storeNum = res.data.result.total;
        }
      } catch (e) {
        console.log(e);
      }
    },
    // 合计收入
    async fetchSumIncome() {
      var params = {
        cityId: this.cityId,
        startTime: this.screenObj.gTime[0],
        endTime: this.screenObj.gTime[1],
        queryType: "18006"
      };

      this.sumIncomeArr = [];
      try {
        var res = await GetDataByTargetForTwo(params);
        if (res.data.code === "0") {
          this.$set(this, "workNum", res.data.result.total);
        }
      } catch (e) {
        console.log(e);
      }
    },
    // 成交量
    async fetchVolume() {
      var params = {
        cityId: this.cityId,
        startTime: this.screenObj.gTime[0],
        endTime: this.screenObj.gTime[1],
        queryType: "18005"
      };
      try {
        var res = await GetDataByTargetForTwo(params);
        if (res.data.code === "0") {
          this.volume = res.data.result.total;
        }
      } catch (e) {
        console.log(e);
      }
    },
    // 楼盘
    async fetchBulidNum() {
      var params = {
        startTime: this.screenObj.gTime[0],
        endTime: this.screenObj.gTime[1],
        cityId: this.cityId,
        queryType: "18023"
      };
      try {
        var res = await GetDataByTargetForTwo(params);
        if (res.data.code === "0") {
          this.buildNum = res.data.result.total;
        }
      } catch (e) {
        console.log(e);
      }
    },
    // 客源量
    async fetchCustomerNum() {
      var params = {
        cityId: this.cityId,
        startTime: this.screenObj.gTime[0],
        endTime: this.screenObj.gTime[1],
        queryType: "18004"
      };
      try {
        var res = await GetDataByTargetForTwo(params);
        if (res.data.code === "0") {
          this.customerNum = res.data.result.total;
        }
      } catch (e) {
        console.log(e);
      }
    },
    // 房源量
    async fetchHouseNum() {
      var params = {
        cityId: this.cityId,
        startTime: this.screenObj.gTime[0],
        endTime: this.screenObj.gTime[1],
        queryType: "18003"
      };
      try {
        var res = await GetDataByTargetForTwo(params);
        if (res.data.code === "0") {
          this.houseNum = res.data.result.total;
        }
      } catch (e) {
        console.log(e);
      }
    },
    async fetchArea() {
      var self = this;
      try {
        var params = {
          cityId: this.cityId
        };
        var res = await GetAllRegion(params);
        if (res.data.code === "0") {
          var resData = res.data.result;
          var arr = [
            {
              id: "0",
              name: "洛阳市"
            }
          ];
          self.areaArr = resData;
          self.$set(self, "topNav", arr.concat(resData));
          //  self.onNav("",'0')
        }
      } catch (e) {
        console.log(e);
      }
    },
    onMap(res) {
      this.areaArr.forEach(item => {
        if (item.name === res) {
          var id = item.id;
          this.$router.push({
            path: "areaAnalysis",
            query: {
              districtId: id, // 区域id
              areaName: res,
              cityId: this.selTimeCityId
            }
          });
        }
      });
    },
    // 区域楼盘分布
    async getdevelopmentAreaOptionData() {
      var self = this;
      try {
        var params = {
          cityId: this.cityId,
          startTime: this.screenObj.gTime[0],
          endTime: this.screenObj.gTime[1],
          queryType: "18023" // 楼盘新房
        };
        var res = await GetDataByTargetForTwo(params);
        if (res.data.code === "0") {
          var resData = res.data.result; // 新房成交
          var newHouseParams = {
            cityId: this.cityId,
            startTime: this.screenObj.gTime[0],
            endTime: this.screenObj.gTime[1],
            queryType: "18035" // 楼盘新房
          };
          var newHouseRes = await GetDataByTargetForTwo(newHouseParams);
          // var resDataArr = [
          //   {
          //     name: "新房",
          //     value: resData
          //   },
          //   {
          //     name: "楼盘",
          //     value: newHouseRes.data.result
          //   }
          // ];
          // var resLength = resData.length;
          // var xName = []
          // for (let i = 0; i < resLength; i++) {
          //   // if(i === 0){
          //   //   xName.push(resData.list )
          //   // }
          //   var item = {
          //     name: resData[i].name,
          //     value: "",
          //     list: []
          //   }
          // }
          // this.$set(this, "developmentAreaOption", resDataArr);
          self.initDevelopmentAreaChart(resData, newHouseRes);
        }
      } catch (e) {
        console.log(e);
      }
    },
    initDevelopmentAreaChart(res, newHouseRes) {
      // 请求两次，新房和楼盘
      var resTwo = newHouseRes.data.result;
      var xData = [];
      var unit = "人";
      var data1 = {
        data: [],
        name: "新房",
        type: "line",
        smooth: true,
        areaStyle: {
          normal: {
            color: {
              type: "linear",
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                {
                  offset: 0,
                  color: "rgba(141,76,253,0.5)" //  0% 处的颜色
                },
                {
                  offset: 1,
                  color: "rgba(141,76,253,0)" //  100% 处的颜色
                }
              ],
              globalCoord: false //  缺省为 false
            },
            shadowColor: "rgba(0, 0, 0, 0.1)",
            shadowBlur: 10
          }
        },
        symbol: "image:// " + lineCircle2
      };
      var data2 = {
        data: [],
        name: "楼盘",
        type: "line",
        smooth: true,
        areaStyle: {
          normal: {
            color: {
              type: "linear",
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                {
                  offset: 0,
                  color: "rgba(141,76,253,0.5)" //  0% 处的颜色
                },
                {
                  offset: 1,
                  color: "rgba(141,76,253,0)" //  100% 处的颜色
                }
              ],
              globalCoord: false //  缺省为 false
            },
            shadowColor: "rgba(0, 0, 0, 0.1)",
            shadowBlur: 10
          }
        },
        symbol: "image:// " + lineCircle
      };
      var legend = [
        {
          name: "新房",
          icon: "circle",
          textStyle: {
            color: "#31cee6",
            fontSize: 14,
            padding: [0, 10]
          }
        },
        {
          name: "楼盘",
          icon: "circle",
          textStyle: {
            color: "#31cee6",
            fontSize: 14,
            padding: [0, 10]
          }
        }
      ];
      res.list.forEach(qq => {
        xData.push(qq.name);
        data1.data.push(qq.value);
      });
      resTwo.list.forEach(aa => {
        data2.data.push(aa.value);
      });
      var option = {
        xAxis: {
          data: xData,
          axisLabel: {
            rotate: 45,
            formatter: function(value, index) {
              return "{value|" + value + "}";
            }
          }
        },
        legend: {
          data: legend,
          right: "9%",
          orient: "vertical",
          top: "center"
        },
        tooltip: {
          axisPointer: {
            shadowStyle: {
              color: {
                colorStops: [
                  {
                    offset: 0,
                    color: "rgba(0,0,0,0)" // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: "rgba(0,209,255,0.2)" // 100% 处的颜色
                  }
                ]
              }
            }
          },
          formatter: params => this.$utils.formatterLine(res, params, unit)
        },
        grid: {
          right: "20%",
          bottom: "20%"
        },
        series: [data1, data2]
      };
      this.$set(this, "developmentAreaOption", option);
    },
    // 区域成交户型分布
    async initRegionalAreaType() {
      var self = this;
      try {
        self.setDataTime("params");
        var params = {
          cityId: this.cityId,
          startTime: this.screenObj.gTime[0],
          endTime: this.screenObj.gTime[1],
          queryType: "18021"
        };
        var res = await GetDataByDoubleTargetForTwo(params);
        if (res.data.code === "0") {
          var resData = res.data.result;
          this.$set(this, "regionalAreaTypeArr", resData);
        }
      } catch (e) {
        console.log(e);
      }
    },
    // 区域客源分布
    async initcustomerAreaArr() {
      var self = this;
      try {
        self.setDataTime("params");
        var params = {
          cityId: this.cityId,
          startTime: this.screenObj.gTime[0],
          endTime: this.screenObj.gTime[1],
          queryType: "18013"
        };
        var res = await GetDataByDoubleTargetForTwo(params);
        if (res.data.code === "0") {
          var resData = res.data.result;
          this.$set(this, "customerAreaArr", resData);
        }
      } catch (e) {
        console.log(e);
      }
    },

    // 区域门店成交top10
    async initStoreTransactionTop() {
      var self = this;
      try {
        self.setDataTime("params");
        var params = {
          cityId: this.cityId,
          startTime: this.screenObj.gTime[0],
          endTime: this.screenObj.gTime[1],
          queryType: "19002"
        };
        var res = await GetBusinessRanking(params);
        if (res.data.code === "0") {
          var resData = res.data.result;
          this.$set(this, "storeTransactionTopArr", resData);
        }
      } catch (e) {
        console.log(e);
      }
    },
    // 区域，门店分布
    async initAreaStore() {
      var self = this;
      try {
        self.setDataTime("params");
        var params = {
          cityId: this.cityId,
          startTime: this.screenObj.gTime[0],
          endTime: this.screenObj.gTime[1],
          queryType: "18001"
        };
        var res = await GetDataProfileInfo(params);
        if (res.data.code === "0") {
          var resData = res.data.result;
          this.$set(this, "areaStoreArr", resData.targetDetailList);
        }
      } catch (e) {
        console.log(e);
      }
    },
    // 区域收入统计
    async fetchAreaIncome() {
      var self = this;
      try {
        self.setDataTime("params");
        var params = {
          cityId: this.cityId,
          startTime: this.screenObj.gTime[0],
          endTime: this.screenObj.gTime[1],
          queryType: "18026"
        };
        var res = await GetDataByDoubleTargetForTwo(params);
        if (res.data.code === "0") {
          var resData = res.data.result;
          this.$set(this, "areaIncomeArr", resData);
        }
      } catch (e) {
        console.log(e);
      }
    },
    // 区域房源成交量
    async fetchRoomArea() {
      var self = this;
      try {
        self.setDataTime("params");
        var params = {
          // 查询房源指标数据
          cityId: this.cityId,
          startTime: this.screenObj.gTime[0],
          endTime: this.screenObj.gTime[1],
          queryType: "18019" // 18001门店 18002员工 18003房源 18004客源 18005成交量 18006成交总收入18007共享营销
        };
        var res = await GetDataByDoubleTargetForTwo(params);
        if (res.data.code === "0") {
          var resData = res.data.result;
          resData.forEach(item => {
            item.startColor = "#da34fb";
            item.endColor = "#6937fd";
          });
          this.$set(this, "roomAreaArr", resData);
        }
      } catch (e) {
        console.log(e);
      }
    },
    // 改变时间
    onChangeTime(res) {
      this.selTimeCityId = res.cityId;
      this.cityId = res.cityId;
      this.screenObj = res;
      this.fetchData();
    },
    setDataTime(name, num) {
      this[name].startTime = this.gTime[0];
      this[name].endTime = this.gTime[1];
      if (num) {
        this[name].queryType = num;
      }
      this[name].districtId = this.screenObj.area.id;
      this[name].storeId = this.screenObj.store.id;
    },
    // 获取数据
    fetchData() {
      // 区域，门店数量
      this.fetchAllStore();
      // 合计收入
      this.fetchSumIncome();
      // 成交量
      this.fetchVolume();
      // 楼房(新房)
      this.fetchBulidNum();
      // 客源总量
      this.fetchCustomerNum();
      // 房源总量
      this.fetchHouseNum();
      // 区域楼盘分布
      this.getdevelopmentAreaOptionData();
      // 区域成交户型分布
      this.initRegionalAreaType();
      // 区域客源分布
      this.initcustomerAreaArr();
      // 区域前十
      this.initStoreTransactionTop();
      // 区域门店分布
      this.initAreaStore();
      // 区域房源成交量
      this.fetchRoomArea();
      // 区域收入统计
      this.fetchAreaIncome();
    },
    // 跳页面
    pushPage(name) {
      this.$router.push({
        path: name
      });
    }
  }
};
</script>

<style scoped lang="scss">
@import "../../../../styles/base/_parameters";

.selTimeCon {
  margin-top: 26px;
  text-align: center;
}
.lineImg {
  width: 1712px;
  height: 8px;
  color: #2ff0d2;
  @include bgImg(minLine);
}
.lineCon {
  @include flex-jc;
  width: 100%;
  text-align: center;
}
.boldFont {
  margin-top: 6pt;
}
.chartLine {
  position: absolute;
  right: 0;
  top: 10%;
  width: 1px;
  height: 300px;
  background: rgba(#31cee6, 0.2);
}
.minTopLeftCon {
  position: relative;
  /* padding: 20px 0; */
}
.midCon {
  @include flex-dc;
  width: 100%;
  /* height: 792px; */
  margin-top: 20px;
  color: #2ff0d2;
  @include moduleBg(bg_1813x792);
}
.topRightLLine {
  display: flex;
  align-items: center;
  margin-left: 36pt;
  margin-top: 12pt;
}
.topRightLTopTitle {
  font-size: 20px;
  margin-left: 6pt;
}
.topRightLTopTitleLine {
  width: 3px;
  height: 14px;
  margin-top: 6px;
  background: #2ff0d2;
}
.topRightLCon {
  position: relative;
}
.topRightCon {
  @include flex-dr-ic-jsb;
  width: 1420px;
  /* height: 391px; */
  margin-left: 20px;
  margin-top: 27px;
  color: #2ff0d2;
  @include moduleBg(bg_1420x393);
}
.topBottomRow {
  display: flex;
  flex-direction: row;
  width: 100%;
  justify-content: space-around;
  color: #2ff0d2;
  align-items: center;
}
.topBottomItem {
  padding: 0 5px;
  text-align: center;
}
.topBottomItem p:nth-of-type(1) {
  font-size: 16px;
}
.topBottomItem p:nth-of-type(2) {
  font-size: 38px;
}
.topBottomNum {
  font-family: "DIN Condensed Bold";
}
.topLeftCon span {
  font-size: 72px;
  line-height: 72px;
  margin-top: 8pt;
}

.topLeftFont {
  padding-top: 80px;
  padding-bottom: 40px;
  font-size: 25px;
}

.topLeftCon b {
  font-size: 72px;
  line-height: 77px;
}
.topLeftCon {
  @include flex-dc-ic;
  width: 373px;
  /* height: 393px; */
  margin-top: 20pt;
  color: #2ff0d2;
  @include moduleBg(bg_373x393);
}
.itemImg {
  width: 20%;
}
.itemImgCon {
  padding: 100px 0;
  width: 100%;
  text-align: center;
}
</style>
